<template>
	<view class="create-container">
		<uni-forms :modelValue="searchParams" :rules="rules" ref="form">
			<uni-forms-item label="用户ID:" name="userId" :label-width='80' required>
				<uni-easyinput type="text" v-model="searchParams.userId" placeholder="请输入用户ID" />
			</uni-forms-item>
			<uni-forms-item label="代理级别:" name="actingLiv" :label-width='80' required>
				<uni-data-select v-model="searchParams.actingLiv" :localdata="range"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="佣金比例:" name="type" :label-width='80' style="display: flex;" class="flex" required>
				<uni-data-select v-model="searchParams.type" :localdata="range"></uni-data-select>
				<!-- <uni-number-box v-model="searchParams.bl"  @change="changebl"></uni-number-box>% -->
				<tui-numberbox :value="searchParams.bl" :min="0" :max="99" @change="changebl"
					backgroundColor='transparent'></tui-numberbox>%
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="submit" class="mt20">提交</button>
	</view>
</template>

<script>
	import {bindActing} from '@/api/agent.js'
	export default {
		data() {
			return {
				searchParams: {
					date: '',
					actingLiv: undefined,
					userId: '',
					bl: undefined,
					type: undefined
				},
				range: [{
						value: 0,
						text: "总代"
					},
					{
						value: 1,
						text: "一级代理"
					},
					{
						value: 2,
						text: "二级代理"
					}, {
						value: 3,
						text: "无代理"
					},
				],
				rules: {
					userId: {
						rules: [{
							required: true,
							errorMessage: '请输入用户ID'
						}]
					},
					actingLiv: {
						rules: [{
							required: true,
							errorMessage: '请选择代理级别'
						}]
					},
					type: {
						rules: [{
							required: true,
							errorMessage: '请选择佣金比例'
						}]
					}
				}
			}
		},
		onLoad(options) {
			
			if(options.id){
				uni.setNavigationBarTitle({
					title: '修改代理'
				});
			}
		},
		methods: {
			changeType(e) {
				this.searchParams.actingLiv = e;
			},
			changebl(e) {
				this.searchParams.bl = e.value;
			},
			submit() {
				this.$refs.form.validate().then(res => {
					let pramas = {
						...res,
						bl: this.searchParams.bl
					}
					console.log('表单验证通过', pramas);
					bindActing(pramas).then(res=>{
						console.log(126,res);
						// uni.navigateBack()
					})
					// 提交逻辑
				}).catch(err => {
					
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.create-container {
		padding: 40rpx;

		.flex {
			display: flex;
		}
	}

	::v-deep .tui-num__icon__box {
		display: none !important;
	}

	::v-deep .tui-num-input {
		border: 1px solid #e5e5e5;
		border-radius: 8rpx;
		height: 66rpx !important;
		width: 140rpx !important;
		margin-left: 10rpx;
	}

	::v-deep .uni-input-placeholder {
		color: #6a6a6a !important;
	}

	::v-deep .uni-numbox__plus {
		display: none !important;
	}

	::v-deep .uni-numbox__value {
		border: 2rpx solid #e5e5e5;
		background: #ffffff !important;
		border-radius: 8rpx;
		height: 60rpx;
		width: 140rpx !important;
		margin-left: 10rpx;
	}

	::v-deep .uni-numbox__minus {
		display: none !important;
	}

	::v-deep .flex .uni-forms-item__content {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
	}
</style>